<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>求福</title>
	</head>
	<style type="text/css">
		*{
			margin: 0 0 ;
		}
		body{
			background-image:url(img/R-C.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
		#grade{
			margin-top: 1.25rem;
			margin-left: 1.875rem;
			/* font-weight: ; */
		}
		#grade h4{
			color: blue;
		}
		#grade h4 input{
			background-color: #fff200;
			height: 1.875rem;
			width: 4.375rem;
			font-size: 1.875rem;
		}
		
		#user{
			float: right;
			margin-right: 1.875rem;
			margin-top: 1.875rem;
		}
		#user input{
			margin-top: 1.25rem;
			background-color: #FFF200;
		}
		
		#load{
			margin-left: 5.875rem;
		}
		#wel{
			margin-left: 2.5rem;
			margin-top: 1.875rem;
		}
		
		#act{
			margin-top: -2.35rem;
			margin-left: 40%;
			margin-bottom: 0.625rem;
		}
		
		#lit{
			margin-left: 1.875rem;
			height: 2.875rem;
			width: 9.375rem;
		}
		#dot{
			width: 10rem;
			height: 5rem;
		}
		img{
			margin-top: -1%;
			margin-left: 45%;
			width: 15.375rem;
		}
		#danmu{
			position: fixed;
			margin-top: 27%;
			margin-left: 45%;
			color: red;
			
		}
		@keyframes danmu1 {
			0%{
				transform: translate(0px,0px);
				opacity: 0;
			}
			99%{
				transform: translate(0px,-100px);
				opacity: 1;
			}
			100%{
				transform: translate(0px,-100px);
				opacity: 0;
			}
		}
	</style>
	<body>
		
		<div id="grade">
			<h4>拥有功德值：<input id="cout" type="text" value="111" /></h4>
		</div>
		<div id="user">
			<form action="" method="post">
				
				姓名：<input type="text" value=""/>
				<br>
				密码：<input type="password" value=""/>
				<br>
				<input type="submit" id="load" name="" value="信徒登录"/>
			</form>
		</div>
		
		<div id="wel">
			<h2>欢迎来自，小雷音寺的佛友</h2>
			      <marquee behavior="scroll" direction="left" scrollamount="20"><font color="pink" size="10px">666</font> </marquee>
			      <marquee behavior="scroll" direction="left" scrollamount="20"><font color="greenyellow" size="20px">牛蛙牛蛙</font> </marquee>
			      <marquee behavior="scroll" direction="left" scrollamount="15"><font color="pink" size="20px">善男子。若有身口意业语者。不名佛语。善男子。</font> </marquee>
				  <marquee behavior="scroll" direction="left" scrollamount="20"><font color="greenyellow" size="20px">若于自性清净法上</font> </marquee>
				  <marquee behavior="scroll" direction="left" scrollamount="10"><font size="16px" >子夏曰：“贤贤易色；事父母，能竭其力；事君，能致其身；与朋友交，言而有信。虽曰未学，吾必谓之学矣。”</font> </marquee>
				  <marquee behavior="scroll" direction="left" scrollamount="15"><font color="pink" size="20px">厉害</font> </marquee>
		</div>
		<div id="muyu">
			<div id="danmu"></div>
			<img src="img/muyu.png" style="margin-left: 43%;">
		</div>
		
		<div id="act">
			<button type="button" class="mui-btn mui-btn-blue" id="dot" onclick="play()">敲击木鱼</button>
			<!-- <img class="img"  id="wooden_fish_img" src="img/woden_fish.jpg" onclick="play()"/> -->
			<button type="button" id="lit" onclick="play1()">倾听佛音</button>
			<button type="button" id="lit" onclick="play2()">与佛祖同乐</button>
		</div>
		<audio src="img/wooden_fish_click_sound.mp3" id="audio"/>
		<!-- <audio src="audio/南无阿弥陀佛！南无阿弥陀佛！_爱给网_aigei_com.mp3" id="audio1"/> -->
		<audio src="img/background_music.mp3" id="audio1"/>
		<audio src="./img/laugh.mp3" id="audio2"/>
		<script type="text/javascript">
				var body = document.getElementsByTagName('body')[0];
				var textArr=["乐观+1", "❤+1" ,"积极+1", "向上+1", "自由+1", "正能量+1","(*^▽^*)+1", "元气满满+1", "开心+1+1" ,"快乐+1", "善良+1", "可爱+1", "暴富+1", "暴瘦+1"];
				document.addEventListener('click',(e)=>{
					// 生成字符串
					var ev = e || window.event;
					var baseX = ev.pageX;
					var baseY = ev.pageY;
					var new_span=document.createElement('span');
					new_span.innerText=textArr[parseInt(Math.random()*textArr.length)]
					new_span.style.fontSize=30+'px';
					new_span.style.position='fixed';
					new_span.style.fontWeight=200+'px';
					new_span.style.left=45+'%';
					new_span.style.top=60+'%';
					new_span.style.color='RGB('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')';
					body.appendChild(new_span);
					// 定时器1实现字符串上升效果
					var timer = window.setInterval(()=>{
						new_span.style.top=parseInt(window.getComputedStyle(new_span,null)['top'])-2+'px';
						// console.log(window.getComputedStyle(new_span,null)['fontSize']);
						new_span.style.opacity=window.getComputedStyle(new_span,null)['opacity']-0.02;
						
					},30);
					// 定时器2实现字符串消失
					window.setTimeout(()=>{
						window.clearInterval(timer);
						body.removeChild(new_span);
					},1000);
				},false);
		
			</script>
	</body>
	<script>
		var num = document.getElementById("cout").value;
		var danmu = document.getElementById("danmu").value;
	    function play(){
	        var audio = document.getElementById('audio');
	        audio.play();
			num++;
			// if(true){
				// document.getElementById("danmu").innerHTML ="<h2  style="animation:danmu1 2s infinite;">功德+1</h2>";
			// }else{
			// 	document.getElementById("danmu").innerHTML ="功德+1";
			// }
			document.getElementById("cout").value = num;
			
	    }
		function play1(){
		    var audio = document.getElementById('audio1');
		    audio.play();
		}
		function play2(){
		    var audio = document.getElementById('audio2');
			
			if(num<0){
				alert("您功德已耗尽，请继续修行")
			}else{
				num=num-20;
			}
			document.getElementById("cout").value = num;
		    audio.play();
		}
	</script>
</html>
